<template>
    <div>
        
        <div style="margin:10px;">
                <div class="table-operator">
                    
                    <a-tabs>
                        <a-tab-pane key="0" tab="表格属性">
                            <ExtForm ref="ExtForm" :formfields="formfields" @changeEventHandler="changeEventHandler"></ExtForm>
                        </a-tab-pane>
                        <a-tab-pane key="1" tab="表格字段">
                            <a-button  shape="round" size="small" type="primary" icon="plus" @click="addColumn">添加字段</a-button>
                            <div class="ant-list ant-list-sm ant-list-split" style="max-height:60vh; overflow: auto;">
                                <div class="ant-spin-nested-loading">
                                    <div class="ant-spin-container">
                                        <ul class="ant-list-items">
                                            <draggable :list="component.props.columns" :sort="true" :animation="150" :group="{ name: 'field', pull: false, put: false }">
                                                <li class="ant-list-item" v-for="(column,idx) in component.props.columns" :key="idx">
                                                    <div class="ant-list-item-meta">
                                                        <div class="ant-list-item-meta-content">
                                                            <h4 class="ant-list-item-meta-title">
                                                                <a @click="columnEdit(column)">{{column.title}}</a>
                                                                <a-divider type="vertical" />
                                                                <a @click="columnDel(column)">删除</a>
                                                            </h4>
                                                            <div class="ant-list-item-meta-description">
                                                                <a-breadcrumb separator="">
                                                                    <a-breadcrumb-item>字段代码</a-breadcrumb-item>
                                                                    <a-breadcrumb-separator>:</a-breadcrumb-separator>
                                                                    <a-breadcrumb-item >{{column.dataIndex}}</a-breadcrumb-item>
                                                                    <!-- <a-breadcrumb-separator>|</a-breadcrumb-separator> -->

                                                                    
                                                                </a-breadcrumb>
                                                                
                                                            </div>
                                                        </div>
                                                    </div>
                                                </li>
                                            </draggable>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </a-tab-pane>
                       
                        <a-tab-pane key="2" tab="查询框字段">
                            <a-button  shape="round" size="small" type="primary" icon="plus" @click="addField">添加字段</a-button>
                            <div class="ant-list ant-list-sm ant-list-split" style="max-height:60vh; overflow: auto;">
                                <div class="ant-spin-nested-loading">
                                    <div class="ant-spin-container">
                                        <ul class="ant-list-items">
                                            <draggable :list="component.props.formAttributes" :sort="true" :animation="150" :group="{ name: 'field', pull: false, put: false }">
                                                <li class="ant-list-item" v-for="(field,idx) in component.props.formAttributes" :key="idx">
                                                    <div class="ant-list-item-meta">
                                                        <div class="ant-list-item-meta-content">
                                                            <h4 class="ant-list-item-meta-title">
                                                                <a @click="fieldEdit(field)">{{field.label}}</a>
                                                                <a-divider type="vertical" />
                                                                <a @click="fieldDel(field)">删除</a>
                                                            </h4>
                                                            <div class="ant-list-item-meta-description">
                                                                <a-breadcrumb separator="">
                                                                    <a-breadcrumb-item>字段代码</a-breadcrumb-item>
                                                                    <a-breadcrumb-separator>:</a-breadcrumb-separator>
                                                                    <a-breadcrumb-item >{{field.field}}</a-breadcrumb-item>
                                                                    <!-- <a-breadcrumb-separator>|</a-breadcrumb-separator> -->

                                                                    
                                                                </a-breadcrumb>
                                                                
                                                            </div>
                                                        </div>
                                                    </div>
                                                </li>
                                            </draggable>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </a-tab-pane>
                        <a-tab-pane key="3" tab="行操作">
                            <a-button  shape="round" size="small" type="primary" icon="plus" @click="addAction">添加操作</a-button>
                            <div class="ant-list ant-list-sm ant-list-split" style="max-height:60vh; overflow: auto;">
                                <div class="ant-spin-nested-loading">
                                    <div class="ant-spin-container">
                                        <ul class="ant-list-items">
                                            <draggable :list="component.action" :sort="true" :animation="150" :group="{ name: 'field', pull: false, put: false }">
                                                <li class="ant-list-item" v-for="(action,idx) in component.action" :key="idx">
                                                    <div class="ant-list-item-meta">
                                                        <div class="ant-list-item-meta-content">
                                                            <h4 class="ant-list-item-meta-title">
                                                                <a @click="actionEdit(action)">{{action.actionName}}</a>
                                                                <a-divider type="vertical" />
                                                                <a @click="actionDel(action)">删除</a>
                                                            </h4>
                                                            <div class="ant-list-item-meta-description">
                                                                <a-breadcrumb separator="">
                                                                    <a-breadcrumb-item>操作方法</a-breadcrumb-item>
                                                                    <a-breadcrumb-separator>:</a-breadcrumb-separator>
                                                                    <a-breadcrumb-item >{{action.actionMethod}}</a-breadcrumb-item>
                                                                    <!-- <a-breadcrumb-separator>|</a-breadcrumb-separator> -->

                                                                    
                                                                </a-breadcrumb>
                                                                
                                                            </div>
                                                        </div>
                                                    </div>
                                                </li>
                                            </draggable>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </a-tab-pane>

                        
                        
                    </a-tabs>
                </div>
        </div>
        <TableColumnAttribute ref="TableColumnAttribute"></TableColumnAttribute>
        <TableActionAttribute :action="component.action" :columns="component.props.columns" ref="TableActionAttribute"></TableActionAttribute>
        <TableQueryAttribute ref="TableQueryAttribute" ></TableQueryAttribute>
        <selectEntityField ref="selectEntityField" @onAddField="onAddField"></selectEntityField>
    </div>
</template>
<script>
import ExtForm from '@/components/lt/codeGenerator/components/ExtForm'
import TableColumnAttribute from '@/components/lt/codeGenerator/attribute/TableColumnAttribute'
import TableActionAttribute from '@/components/lt/codeGenerator/attribute/TableActionAttribute'
import TableQueryAttribute from '@/components/lt/codeGenerator/attribute/TableQueryAttribute'
import pageSetting from '@/components/lt/codeGenerator/pageSetting'
import Vue from 'vue'
import ExtTable from '@/components/lt/codeGenerator/components/ExtTable'
import draggable from 'vuedraggable'
import {SysMixin} from '@/mixins/SysMixin'
import { Modal } from 'ant-design-vue'
import selectEntityField from '@/views/system/entity/selectEntityField'

export default {
    name:'TableAttribute',
    components:{draggable,ExtTable,ExtForm,TableActionAttribute,TableColumnAttribute,TableQueryAttribute,selectEntityField},
    mixins:[SysMixin],
    props:{
        component:{
           type:Object,
           default:()=>{}
        },
    },
    watch:{
        'component.action':{
            handler(newVal, oldVal) {
                for (let i = 0; i < this.component.props.columns.length; i++) {
                    if (this.component.props.columns[i].dataIndex === pageSetting.常量.表格操作的插槽名) {
                        this.component.props.columns.splice(i, 1)
                        i--
                    }
                }

                if(newVal.length>0){
                    this.component.props.columns.push({width:newVal.length*80+'px',title:'操作',dataIndex:pageSetting.常量.表格操作的插槽名,scopedSlots: { customRender: pageSetting.常量.表格操作的插槽名 }}) 
                }
            },
            deep: true
        }
    },
    data(){
        return{
  
            formfields:[
                {field:'label',label:'标题',component:pageSetting.常量.表单组件类型.单行文本,initialValue:this.component.label,rules: [{ required: true, message: '不能为空!' }]},
                {field:'ref',label:'ref',component:pageSetting.常量.表单组件类型.单行文本,initialValue:this.component.ref,disabled:true},
                {field:'axiosUrl',label:'请求地址',component:pageSetting.常量.表单组件类型.单行文本,initialValue:this.component.props["axiosUrl"],rules: [{ required: true, message: '不能为空!' }]},
                {field:'rowKey',label:'主键',component:pageSetting.常量.表单组件类型.单行文本,initialValue:this.component.props["rowKey"],rules: [{ required: true, message: '不能为空!' }]},
                {field:'initQuery',label:'默认查询(JSON数组)',component:pageSetting.常量.表单组件类型.单行文本,initialValue:this.component.props["initQuery"]},
                {field:'initOrder',label:'默认排序(JSON数组)',component:pageSetting.常量.表单组件类型.单行文本,initialValue:this.component.props["initOrder"]},
                {field:'showPagination',label:'显示分页',component:pageSetting.常量.表单组件类型.开关,initialValue:this.component.props["showPagination"],checkedChildren:true,unCheckedChildren:false,rules: [{ required: true, message: '不能为空!' }]},
                {field:'showQueryForm',label:'显示查询',component:pageSetting.常量.表单组件类型.开关,initialValue:this.component.props["showQueryForm"],checkedChildren:true,unCheckedChildren:false,rules: [{ required: true, message: '不能为空!' }]},
                {field:'isAutoLoad',label:'自动查询',component:pageSetting.常量.表单组件类型.开关,initialValue:this.component.props["isAutoLoad"],checkedChildren:true,unCheckedChildren:false,rules: [{ required: true, message: '不能为空!' }]},
                {field:'showRowIndex',label:'显示行号',component:pageSetting.常量.表单组件类型.开关,initialValue:this.component.props["showRowIndex"],checkedChildren:true,unCheckedChildren:false,rules: [{ required: true, message: '不能为空!' }]},
                {field:'rowSelection',label:'行选择(JSON对象)',component:pageSetting.常量.表单组件类型.单行文本,initialValue:this.component.props["rowSelection"]},
                {field:'pageSize',label:'每页记录数',component:pageSetting.常量.表单组件类型.数字输入框,initialValue:15,rules: [{ required: true, message: '不能为空!' }]},
              
            ],
            addType:null
      
        }
    },
   
  
    methods:{
       
        addField(){
            this.addType="queryField"
            this.handleEdit({},'selectEntityField','实体选择')
        },
        onAddField(fields){
            let fieldCodelist=[]
            
            if(this.addType=="queryField"){
                if(this.component.props.formAttributes && this.component.props.formAttributes.length>0){
                    fieldCodelist = this.component.props.formAttributes.map(item => item['field'])
                }
                fields.map(item=>{
                    if(!fieldCodelist.includes(item['entityField'])){
                        // Vue.set(this.component.props,"entityClassName",item.entityClassName)
                        this.component.props.formAttributes.push(
                            {label:item.entityFieldTitle,field:item.entityField,component:pageSetting.常量.表单组件类型.单行文本,dbField:item.dbField,entityClassName:item.entityClassName}
                        )
                    }
                })
            }else if(this.addType=="columnField"){
                if(this.component.props.columns && this.component.props.columns.length>0){
                    fieldCodelist = this.component.props.columns.map(item => item['dataIndex'])
                }
                
                fields.map(item=>{
                    if(!fieldCodelist.includes(item['entityField'])){
                        Vue.set(this.component.props,"entityClassName",item.entityClassName)
                        this.component.props.columns.push(
                            {title:item.entityFieldTitle,dataIndex:item.entityField,dbField:item.dbField,entityClassName:item.entityClassName}
                        )
                    }
                })
            }
            
        },
        fieldEdit(field){
            this.handleEdit(field,'TableQueryAttribute',field.label)
        },
        changeEventHandler(item){
            if(item.hasOwnProperty("label")){
                this.component.label=item.label
                for(let i=0;i<this.component.components.length;i++){
                    if(this.component.components[i].type==pageSetting.常量.组件.标题){
                        this.component.components[i].label=item.label
                    }
                }
            }else{
                if(item.hasOwnProperty("showRowIndex")){
                    for (let i = 0; i < this.component.props.columns.length; i++) {
                        if (i==0 && this.component.props.columns[i]['key'] === pageSetting.常量.表格行号的属性名) {
                            this.component.props.columns.splice(i, 1)
                            break
                        }
                    }
                    if(item['showRowIndex']){
                        this.component.props.columns.unshift({
                            title: '序号',
                            dataIndex: '',
                            key:pageSetting.常量.表格行号的属性名,
                            width:60,
                            align:"center",
                            scopedSlots:{customRender:pageSetting.常量.表格行号的属性名}
                        })
                    }
                }
                
                for (const key in item) {
                    
                    Vue.set(this.component.props,key,item[key])
                    
                    
                }
            }

        },
       
        fieldDel(field){
            Modal.confirm({
                title: "系统提醒",
                content: "确定删除？",
                onOk: () => {
                    this.component.props.formAttributes = this.component.props.formAttributes.filter(item=>{
                        return item.field!=field.field
                    })
                },
                onCancel () {}
            })
            
        },
        addColumn(){
            this.addType="columnField"
            this.handleEdit({},'selectEntityField','实体选择')
        },
        columnEdit(column){
            this.handleEdit(column,'TableColumnAttribute',column.title)
        },
        columnDel(column){
            Modal.confirm({
                title: "系统提醒",
                content: "确定删除？",
                onOk: () => {
                    this.component.props.columns = this.component.props.columns.filter(item=>{
                        return item.dataIndex!=column.dataIndex
                    })
                },
                onCancel () {}
            })
        },
        addAction(){
            this.handleEdit({},'TableActionAttribute','操作方法添加')
        },
        actionEdit(action){
            this.handleEdit(action,'TableActionAttribute','操作方法详情')
        },
        actionDel(action){
            Modal.confirm({
                title: "系统提醒",
                content: "确定删除？",
                onOk: () => {
                    this.component.action = this.component.action.filter(item=>{
                        return item.actionName!=action.actionName
                    })
                },
                onCancel () {}
            })
        },

       
    }
}
</script>

<style scoped>
/* ::v-deep .ant-select-selection{
    border: none !important;
    box-shadow: none !important;
    background-color: #ffffff !important;
    color:rgba(0, 0, 0, 0.45) !important;
}
::v-deep .ant-select-arrow{
    display: none !important;
} */
</style>

